<div style="padding:0px;background-color: #F2F2F2;" class="cz_<#if reportModel??>${reportModel.id}</#if>">
	<div class="rs_layout_top">
		<div class="data_model" style="height:25px;line-height:22px;padding-left:5px;font-weight:bold;">
			${report.name!''}
		</div>
	</div>
	<div class="rs_layout_center container design_container" style="background-color:#FFFFFF;border-top:0px;padding:10px;">
		<#if reportModel.modelPackageList??>
		<#list reportModel.modelPackageList as pkg>
		<div class="comp <#if pkg.pkglayout==true>layout</#if>" data-id="${pkg.id!''}" id="comp_${pkg.id!''}" style="width:${reportModel.width!'100'}${reportModel.widthunit!'%'};height:${reportModel.height!'100'}${reportModel.heightunit!'%'};" <#if pkg_index gt 0>style="margin-top:10px;"</#if>>
			<div class="comp-drag-handle"></div>
			<div class="comp-remove" style="margin-right:13px;" onclick="BtnAction.delPackage('${pkg.id!''}','#design_table')"></div>
			<div  title="编辑html" onclick="tipArtPage('编辑html','<#if reportModel??>/${orgi}/design/query/editpackage/${report.id!''}/${reportModel.id!''}.html?pkgid=${pkg.id!''}</#if>','800',false)" class="comp-edit" style="margin-right:30px;"></div>
			<#if pkg.pkgtype?? && pkg.pkgtype = 'chart'>
			<div style="width:<#if reportModel.defwidth?? && reportModel.defwidth??>${reportModel.defwidth}<#else>100%</#if>;background-color: #FEFEFE;height:<#if reportModel.defheight??>${reportModel.defheight}<#else>200px</#if>"  id="chart_${pkg.id!''}" data-id="${pkg.id!''}">
			<#else>
			<div id="pkg_${reportModel.id!''}" data-id="${pkg.id!''}" <#if pkg.pkglayout == true>class="layout"</#if> style="height:100%;">
			</#if>
			<#if pkg.htmlcontent??&&pkg.htmlcontent!=''>
				<#assign dt = pkg >
				<#assign inlineTemplate = pkg.htmlcontent?interpret>
				<@inlineTemplate /> 
			<#elseif pkg.templet?? && pkg.templet.templettext??>
				<#assign dt = pkg >
				<#assign inlineTemplate = pkg.templet.templettext?interpret>
				<@inlineTemplate /> 
			</#if>					
			</div>	
		</div>
		</#list>
		</#if>				
	</div>		
								
</div>
<script language="javascript">
	var curOverNode  , pkgpos;
	var overLayoutNode = false ;

	$(".comp").droppable({	   		
		activate:function(event,ui){
			curOverNode = null ;
			pkgpos = null ;
		},
		over:function(event,ui){
		   if($(ui.draggable).attr('data-id') != $(this).attr('data-id')){
				if(($(".ui-draggable-dragging").position().top) > $(this).offset().top){
					pkgpos = "after" ;
				}else{
					pkgpos = "befor" ;
				}
		   }
		   if($(this).attr("data-type") == "layout"){
				overLayoutNode = true ;
		   }
		   curOverNode = $(this) ;
		},
		out:function(event,ui){
			if($(ui.draggable).attr('data-id') != $(this).attr('data-id')){
				if(($(".ui-draggable-dragging").position().top) > $(this).offset().top){
					pkgpos = "after" ;
				}else{
					pkgpos = "befor" ;
				}
		   }
		   overLayoutNode = false ;
		   curOverNode = $(this) ;
		}
	});
	$(".design_container").sortable({
		handler:"comp-drag-handle",
        items: ".comp",
        connectWith: ".comp",  
		placeholder:"placeholder",
        update: function ( event, ui ) {
			if($(ui.item).attr('data-templet')){
				if(curOverNode && curOverNode.attr('data-type') == "layout-cell"){
					BtnAction.addNewPackageLayout($(ui.item).attr('data-templet') , curOverNode.attr("data-id") , curOverNode.attr("data-rowinx") , curOverNode.attr("data-colinx") , '#design_table');
				}else{
					if(curOverNode!=null && curOverNode.attr("data-id")){
						BtnAction.addNewPackage($(ui.item).attr('data-templet') , curOverNode.attr("data-id") , pkgpos , '#design_table');
					}else{
						BtnAction.addNewPackage($(ui.item).attr('data-templet') , "" , "", '#design_table');
					}
				}
			}
			return false;
        },
		sort: function  ( event, ui )  {
            if(overLayoutNode){
				$(".placeholder").hide();	
			}else{
				$(".placeholder").show();	
			}
        },
		over: function  ( event, ui )  {
            //hides the placeholder when the item is over the sortable
            //$(".placeholder").hide();			
        },
        out: function  ( event, ui )  {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //shows the placeholder again if there are no items in the list
                //$(".placeholder").show();
            }
        }
    });
	/*****************布局元素的拖入，只支持<table></table>***************************/
	$(".design_container .layout td").droppable({
		hoverClass:"td_cur_model",
		over:function(event,ui){
		   $(".cur_model").each(function(){
				$(this).removeClass("cur_model");
		   });
		   $(this).addClass("td_cur_model");
		   curOverNode = $(this) ;
		   overLayoutNode = true; 
		},
		out:function(event,ui){
			if($(ui.draggable).attr('data-id') != $(this).attr('data-id')){
				if(($(".ui-draggable-dragging").position().top) > $(this).offset().top){
					pkgpos = "after" ;
				}else{
					pkgpos = "befor" ;
				}
		   }
		   curOverNode = null ;
		   overLayoutNode = false; 
		}
	});
	$(".comp").draggable({
		handle:".comp-drag-handle",
		helper:"clone",
		connectToSortable:".design_container"
	});

	//20140310 Bina
	$(document).ready(function(){
		$('.comp').on('click',function(event){
			if($(this).hasClass("cur_model")){
				 $(this).removeClass("cur_model");
			}else{
				$(".cur_model").each(function(){
					$(this).removeClass("cur_model");
				});	
				$(".td_cur_model").each(function(){
					$(this).removeClass("td_cur_model");
				});
				$(this).addClass("cur_model");
			}		
			if($(this).attr("data-id")!=null && dataModelPropertiesTree!=null){
				dataModelPropertiesTree.selectNode(dataModelPropertiesTree.getNodeByParam("id", $(this).attr("data-id"), null));				
			}
			/**
			 * 触发非图表组件，点击配置属性 , 同时，需要判断该组件是否在布局里，如果在布局，则同时需要触发设置布局TD的属性
			 *
			 */

			/**
			 * 先加载组件的 属性配置信息，然后在加载 布局的 属性信息
			 *
			 */
			/**
			 * 第一步：加载组件的属性信息，组件的信息在 后台的组件 模板里配置，如果未配置模板的参数信息，则使用默认的配置界面
			 *
			 */
			BtnAction.loadProperties($(this).attr('data-id'), '#modelproperties');		
			/**
			 * 第二步：加载布局的 属性信息
			 *
			 */
			if($(this).attr("data-cell")!=null && $(this).attr('data-layout')!=null){				
				BtnAction.loadLayoutProperties($(this).attr('data-cell') , $(this).attr('data-layout'), '#layoutproperties');	
				$("#layout").show();
			}else{
				$("#layout").hide();
			}
			/**
			 * 第三步：切换页签
			 *
			 */
			$("#model").show().click();
			event.stopPropagation();//点击Button阻止事件冒泡到document
		});
		
		$('.comp td').on("click",function(event){
			$(".cur_model").each(function(){
				$(this).removeClass("cur_model");
			});
			$(".td_cur_model").each(function(){
				$(this).removeClass("td_cur_model");
			});
			$(this).addClass("td_cur_model");
			/**
			触发 属性配置
			***/
			BtnAction.loadLayoutProperties($(this).attr('data-cell') , $(this).attr('data-id'), '#layoutproperties');
			
			if($(this).attr("data-id")!=null && dataModelPropertiesTree!=null){
				dataModelPropertiesTree.selectNode(dataModelPropertiesTree.getNodeByParam("id", $(this).attr("data-id"), null));				
			}
			$("#layout").show().click();
			$("#model").hide();
			event.stopPropagation();//点击Button阻止事件冒泡到document
		});
		
		$('.highcharts-container').on('click',function(){
			$(".cur_model").each(function(){
				$(this).removeClass("cur_model");
			});
			$(".td_cur_model").each(function(){
				$(this).removeClass("td_cur_model");
			});
			$(this).parent().parent().addClass("cur_model");
			if($(this).parent().parent().attr("data-id")!=null && dataModelPropertiesTree!=null){
				dataModelPropertiesTree.selectNode(dataModelPropertiesTree.getNodeByParam("id", $(this).parent().parent().attr("data-id"), null));	
				
				/**
				 * 触发图表组件，点击配置属性 , 同时，需要判断该组件是否在布局里，如果在布局，则同时需要触发设置布局TD的属性
				 *
				 */

				 BtnAction.loadProperties($(this).parent().parent().attr("data-id"), '#modelproperties');		
				/**
				 * 第二步：加载布局的 属性信息
				 *
				 */
				if($(this).parent().parent().attr("data-cell")!=null && $(this).parent().parent().attr('data-layout')!=null){				
					BtnAction.loadLayoutProperties($(this).parent().parent().attr('data-cell') , $(this).parent().parent().attr('data-layout'), '#layoutproperties');	
					$("#layout").show();
				}else{
					$("#layout").hide();
				}
				/**
				 * 第三步：切换页签
				 *
				 */
				$("#model").show().click();

			}
		});

		$('.comptable thead td').on("click" , function(){
			var tableid = "#table_"+$(this).attr("data-id") ;
			$(".design_container .ui-selected").each(function(){
				$(this).removeClass("ui-selected");
			});
			var index = $(this).index() ;
			
			$(tableid+" tr").each(function(){
				$(this).find('td:eq('+index+')').addClass("ui-selected");
			});
		})
		$('body').on("click",function(event){
			$(".design_container .ui-selected").each(function(){
				$(this).removeClass("ui-selected").removeClass("td_cur_model");;
			});
		});
	});
</script>